<template>
  <view class="user-profile">
    <!-- #ifndef H5 -->
    <u-navbar :is-back="true" title="个人设置" :title-bold="true" :is-fixed="true" :border-bottom="false"
      :background="{ background: 'rgba(256,256,256,0.2)' }" @leftClick="customBack" title-color="#FFFFFF"
      back-icon-color="#FFFFFF" z-index="999"></u-navbar>
    <!-- #endif -->

    <!-- 背景装饰元素 - 更新配色 -->
    <view class="profile-bg">
      <view class="bg-gradient"></view>
      <view class="bg-shape shape1"></view>
      <view class="bg-shape shape2"></view>
      <view class="bg-shape shape3"></view>
    </view>

    <view class="content">
      <!-- 用户信息卡片 -->
      <view class="user-card" @tap="handleTouser">
        <view class="avatar-container">
          <image class="user-avatar"
            :src="userInfo.avatar1 != '' ? userInfo.avatar : '/static/images/portrait_empty.png'"></image>
          <view class="edit-badge"><u-icon name="edit-pen" color="#ffffff" size="18"></u-icon></view>
        </view>
        <view class="user-info">
          <view class="nickname">{{ userInfo.nickname || '设置昵称' }}</view>
          <view class="user-id">ID: {{ userInfo.sn || '未设置' }}</view>
        </view>
        <view class="arrow-icon">
          <u-icon name="arrow-right" color="#999" size="16"></u-icon>
        </view>
      </view>

      <!-- 菜单组 -->
      <view class="menu-section">
        <!-- #ifndef MP-WEIXIN-->
        <view class="menu-card">
          <view class="menu-item" @tap="showPwdPop">
            <view class="menu-icon lock-icon"><u-icon name="lock" size="22" color="#FF4B4B"></u-icon></view>
            <view class="menu-label">登录密码</view>
            <view class="menu-value">
              <view class="status-text" v-if="tempUserInfo">{{ tempUserInfo.hasLoginPassword ? '已设置' :
                '未设置' }}</view>
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
          <view class="menu-item" @tap="showPwdPop2">
            <view class="menu-icon lock-icon2"><u-icon name="lock" size="22" color="#fff"></u-icon></view>
            <view class="menu-label">支付密码</view>
            <view class="menu-value">
              <view class="status-text" v-if="tempUserInfo">{{ tempUserInfo.hasPayPassword ? '已设置' : '未设置'
              }}</view>
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>

          <!-- #ifdef H5-->
          <view class="menu-item" @tap="bindWeixin" v-if="!userInfo.oa_auth">
            <view class="menu-icon wx-icon"><u-icon name="weixin-fill" size="22" color="#07C160"></u-icon>
            </view>
            <view class="menu-label">微信授权</view>
            <view class="menu-value">
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
          <!-- #endif -->
        </view>
        <!-- #endif -->

        <view class="menu-card">
          <view class="menu-item" @tap="goLicense()">
            <view class="menu-icon cert-icon"><u-icon name="file-text" size="22" color="#FF4B4B"></u-icon>
            </view>
            <view class="menu-label">资质信息</view>
            <view class="menu-value">
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
          <view class="menu-item" @tap="goToExplain(1)">
            <view class="menu-icon privacy-icon"><u-icon name="fingerprint" size="22" color="#FF4B4B"></u-icon></view>
            <view class="menu-label">隐私政策</view>
            <view class="menu-value">
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
          <view class="menu-item" @tap="goToExplain(0)">
            <view class="menu-icon agreement-icon"><u-icon name="eye-fill" size="22" color="#FF4B4B"></u-icon></view>
            <view class="menu-label">服务协议</view>
            <view class="menu-value">
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
          <view class="menu-item" @tap="clearCache">
            <view class="menu-icon cache-icon"><u-icon name="trash" size="22" color="#FF4B4B"></u-icon>
            </view>
            <view class="menu-label">清除缓存</view>
            <view class="menu-value">
              <view class="status-text">{{ cacheSize }}</view>
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
          <view class="menu-item" @tap="goToCancel">
            <view class="menu-icon cancel-icon"><u-icon name="close-circle" size="22" color="#FF4B4B"></u-icon></view>
            <view class="menu-label">注销账号</view>
            <view class="menu-value">
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
          <view class="menu-item">
            <view class="menu-icon about-icon"><u-icon name="info-circle" size="22" color="#FF4B4B"></u-icon></view>
            <view class="menu-label">关于我们</view>
            <view class="menu-value">
              <view class="version-text">v{{ version }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 退出登录按钮 -->
      <view class="logout-btn-container">
        <view class="logout-btn" @tap="logout">退出登录</view>
      </view>

      <!-- 版权信息 -->
      <view class="license" v-if="appConfig.copyright_info">
        <view>{{ appConfig.copyright_info }}</view>
        <view>{{ appConfig.icp_number }}</view>
      </view>
    </view>

    <!-- #ifndef MP-WEIXIN -->
    <u-popup type="center" closeable v-model="showMobile" mode="center" border-radius="14">
      <view class="modify-container bg-white" v-show="showMobile">
        <view class="title xl text-center">{{
          userInfo.mobile ? '更换手机号' : '绑定手机号'
        }}</view>
        <u-field label="+86" v-if="userInfo.mobile" label-width="100" disabled v-model="userInfo.mobile"></u-field>
        <u-field label="+86" v-else label-width="140" v-model="new_mobile" placeholder="请输入手机号"></u-field>
        <u-field v-model="mobileCode" label="验证码" label-width="140" placeholder="请输入验证码">
          <view slot="right" class="primary send-code-btn br60 flex row-center" @tap="sendSmsFun">
            <u-verification-code :keep-running="true" unique-key="mobile" ref="uCode"
              @change="codeChange"></u-verification-code>
            <view class="sm">{{ codeTips }}</view>
          </view>
        </u-field>
        <u-field label="新手机号" v-if="userInfo.mobile" label-width="140" placeholder="请输入新的手机号码"
          v-model="new_mobile"></u-field>
        <view class="primary m-t-10 xs">{{
          userInfo.mobile ? '更改' : '绑定'
        }}手机号码成功后，您的账号将会变更为该设置号码</view>
        <view class="btn bg-primary white flex row-center" @tap="changeUserMobileFun">确定</view>
      </view>
    </u-popup>
    <!-- #endif -->

    <u-popup v-model="showNickName" :closeable="true" :maskCloseAble="false" mode="center" border-radius="14">
      <view class="modify-container bg-white" style="width: 70vw; padding: 24rpx">
        <view class="title xl text-center">修改用户名</view>
        <form @submit="changeNameConfirm">
          <u-form-item label="新昵称" :labelWidth="120">
            <input style="height: 60rpx" class="nr" :value="userInfo.nickname" name="nickname" type="nickname"
              placeholder="请输入新的昵称" />
          </u-form-item>
          <button class="btn bg-primary white flex row-center" form-type="submit">
            确定
          </button>
        </form>
      </view>
    </u-popup>

    <!-- #ifndef MP-WEIXIN -->
    <u-popup v-model="showPwd" closeable mode="center" border-radius="14">
      <view class="modify-container bg-white">
        <view class="title xl text-center">设置密码</view>
        <u-field label="+86" disabled label-width="100" v-model="userInfo.mobile"></u-field>
        <u-field v-model="pwdCode" label="验证码" label-width="140" placeholder="请输入验证码">
          <view slot="right" class="primary send-code-btn br60 flex row-center" @tap="sendSmsFun">
            <u-verification-code unique-key="password" :keep-running="true" ref="uCode"
              @change="codeChange"></u-verification-code>
            <view class="sm">{{ codeTips }}</view>
          </view>
        </u-field>
        <u-field label="设置密码" label-width="140" type="password" placeholder="请输入新密码" v-model="pwd"></u-field>
        <u-field label="确认密码" label-width="140" type="password" placeholder="再次输入新密码确认" v-model="comfirmPwd"></u-field>
        <view class="btn bg-primary white flex row-center" @tap="forgetPwdFun">确定</view>
      </view>
    </u-popup>
    <!-- #endif -->
    <!-- 修改支付密码 -->
    <!-- #ifndef MP-WEIXIN -->
    <u-popup v-model="showPwd2" closeable mode="center" border-radius="14">
      <view class="modify-container bg-white">
        <view class="title xl text-center">设置支付密码</view>
        <u-field label="+86" disabled label-width="100" v-model="userInfo.mobile"></u-field>
        <u-radio-group v-model="radioValue" @change="radioGroupChange" shape="square" style="margin-top: 20rpx; margin-left: 10rpx;">
          <u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.value">
            {{ item.name }}
          </u-radio>
        </u-radio-group>
        <u-field v-model="pwdCode2" label="验证码" label-width="140" placeholder="请输入验证码" v-if="radioValue == 0">
          <view slot="right" class="primary send-code-btn br60 flex row-center send-code-btn2" @tap="sendSmsFun2">
            <u-verification-code unique-key="password" :keep-running="true" ref="uCode2"
              @change="codeChange2"></u-verification-code>
            <view class="sm">{{ codeTips2 }}</view>
          </view>
        </u-field>
        <u-field label="设置支付密码" label-width="180" type="password" placeholder="请输入支付新密码" v-model="pwd2" v-if="radioValue == 0"></u-field>
        <u-field label="确认支付密码" label-width="180" type="password" placeholder="再次确认新支付密码" v-if="radioValue == 0"
          v-model="comfirmPwd2"></u-field>
        <view class="btn bg-primary white flex row-center btn2" @tap="forgetPwdFun2">确定</view>
      </view>
    </u-popup>
    <!-- #endif -->

    <u-picker mode="selector" v-model="showPicker" :default-selector="[0]" :range="sexList" @confirm="onConfirm" />
  </view>
</template>

<script>
import {
  userLogout,
  getUserInfo,
  getWxMnpMobile,
  setUserInfo,
  setWechatInfo,
  changeUserMobile,
  apibindOa,
  getSendCode,
  setPaypasswd
} from '@/api/user'
import { baseURL, version } from '@/config/app'
import { sendSms, forgetPwd } from '@/api/app'
import { SMSType } from '@/utils/type'
import { mapGetters, mapActions } from 'vuex'
import { uploadFile, isWeixinClient, trottle } from '@/utils/tools'
import { getWxCode, getUserProfile } from '@/utils/login'
import wechath5 from '@/utils/wechath5'

const FieldType = {
  NONE: '',
  SEX: 'sex',
  NICKNAME: 'nickname',
  AVATAR: 'avatar',
  MOBILE: 'mobile'
}
export default {
  name: 'userProfile',
  data() {
    return {
      action: baseURL + '/api/file/formimage',
      fileList: [],
      userInfo: {},
      new_mobile: '',
      pwdCode: '',
      mobileCode: '',
      newNickname: '',
      sexList: ['男', '女'],
      fieldType: FieldType.NONE,
      showPicker: false,
      showMobile: false,
      showPwd: false,
      showNickName: false,
      codeTips: '',
      canSendSms: true,
      pwd: '',
      comfirmPwd: '',
      smsType: '',
      code: '',
      version,
      cacheSize: '0KB',
      tempUserInfo: null,   //设置支付密码
      showPwd2: false,
      codeTips2: '',
      pwdCode2: '',
      pwd2: '',
      comfirmPwd2: '',
      list: [
        {
          name: '短信验证码校验',
          value: 0
        },
        {
          name: '使用登录密码做为支付密码',
          value: 1
        },

      ],
      radioValue: 0, // 单选框的值
      // use_password: '', // 支付密码校验方式：0-短信验证码校验，1-登录密码校验
      border: true, // 输入框是否有边框
    }
  },
  methods: {
    ...mapActions(['getCartNum', 'getUser']),
    // 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		},
    getUserFunc() {
      this.getUser().then(data => {
        // console.log('res12312');
        // console.log(data);
        this.tempUserInfo = data;
        console.log('res12312');
        console.log(this.tempUserInfo);
      })
    },
    // 获取缓存大小
    getCacheSize() {
      uni.getStorageInfo({
        success: (res) => {
          const size = res.currentSize;
          if (size < 1024) {
            this.cacheSize = size + 'KB';
          } else {
            this.cacheSize = (size / 1024).toFixed(2) + 'MB';
          }
        },
        fail: () => {
          this.cacheSize = '0KB';
        }
      });
    },

    // 清除缓存
    clearCache() {
      uni.showModal({
        title: '提示',
        content: '确定要清除缓存吗？',
        success: (res) => {
          if (res.confirm) {
            uni.clearStorageSync();
            this.cacheSize = '0KB';
            this.$toast({
              title: '缓存已清除'
            });

            // 添加延时后跳转到登录页面
            setTimeout(() => {
              this.$store.commit('logout'); // 确保登出状态
              this.$Router.replaceAll('/pages/login/login');
            }, 500);
          }
        }
      });
    },
    customBack() {
      // 获取当前页面栈
      const pages = getCurrentPages();
      // 如果有上一页（可以返回）
      if (pages.length > 1) {
        uni.navigateBack();
      } else {
        // 没有返回路径，跳转到user页面
        this.$Router.push({
          path: '/bundle/pages/user_profile/user_profile'
        });
      }
    },
    handleTouser() {
      this.$Router.push({
        path: '/bundle/pages/user_profile/user_profile'
      })
    },
    codeChange(text) {
      this.codeTips = text
    },
    onSuccess(e) {
      console.log(e)
    },
    uploadImage(path) {
      uni.showLoading({
        title: '正在上传中...',
        mask: true
      })
      uploadFile(path)
        .then((res) => {
          uni.hideLoading()
          this.setUserInfoFun(res.uri)
        })
        .catch(() => {
          uni.hideLoading()
          this.$toast({
            title: '上传失败'
          })
        })
    },
    bindWeixin() {
      this.oaAuth()
    },
    oaAuth() {
      wechath5.getWxUrl()
    },
    onChooseAvatar(e) {
      this.fieldType = FieldType.AVATAR
      // #ifndef MP-WEIXIN
      // 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
      uni.$u.route({
        // 关于此路径，请见下方"注意事项"
        url: '/components/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
        // 内部已设置以下默认参数值，可不传这些参数
        params: {
          // 输出图片宽度，高等于宽，单位px
          destWidth: 300,
          // 裁剪框宽度，高等于宽，单位px
          rectWidth: 200,
          // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
          fileType: 'jpg'
        }
      })
      // #endif
      // #ifdef MP-WEIXIN
      if (e.detail.avatarUrl) {
        this.uploadImage(e.detail.avatarUrl)
      }
      // #endif
    },
    // 修改用户昵称
    async changeNameConfirm(e) {
      this.fieldType = FieldType.NICKNAME
      this.newNickname = e.detail.value.nickname
      if (!this.newNickname)
        return this.$toast({
          title: '请输入新的昵称'
        })
      await this.setUserInfoFun(this.newNickname)
      this.showNickName = false
    },
    // 更新小程序头像信息
    async getUserProfileFun() {
      const { userInfo } = await getUserProfile()
      const { avatarUrl, nickName, gender } = userInfo
      const { msg, code } = await setWechatInfo({
        nickname: nickName,
        avatar: avatarUrl,
        sex: gender
      })
      if (code == 1) {
        this.$toast({
          title: msg
        })
        this.getUserInfoFun()
      }
    },

    // end
    async logout() {
      const [req, res] = await uni.showModal({
        title: '提示',
        content: '是否退出登录？'
      })
      if (!res.confirm) return
      //  退出登录
      userLogout().then((res) => {
        if (res.code == 1) {
          this.$store.commit('logout')
          this.$toast({
            title: '退出成功'
          })
          setTimeout(() => {
            this.$Router.replaceAll('/pages/login/login')
          }, 500)
        }
      })
    },
    goToExplain(value) {
      this.$Router.push({
        path: '/bundle/pages/server_explan/server_explan',
        query: {
          type: value
        }
      })
    },
    goLicense() {
      this.$Router.push({
        path: '/bundle/pages/license/license',
        query: {
          id: ''
        }
      })
    },
    goToCancel() {
      this.$Router.push({
        path: '/bundle/pages/cancel/cancel',
        query: {
          id: ''
        }
      })
    },
    // 发送短信
    sendSmsFun(type) {
      if (!this.$refs.uCode.canGetCode) return
      sendSms({
        mobile: this.userInfo.mobile || this.new_mobile,
        key: this.smsType
      }).then((res) => {
        if (res.code == 1) {
          this.$toast({
            title: res.msg
          })
          this.$refs.uCode.start()
        }
      })
    },
    getUserInfoFun() {
      getUserInfo().then((res) => {
        console.log('res');
        console.log(res);
        if (res.code == 1) {
          this.userInfo = res.data
        }
      })
    },
    // 更换手机号
    showModifyMobile() {
      this.new_mobile = ''
      this.showMobile = true
      this.smsType = this.userInfo.mobile ? SMSType.CHANGE_MOBILE : SMSType.BIND
    },
    changeUserMobileFun() {
      if (!this.mobileCode) {
        this.$toast({
          title: '请输入验证码'
        })
        return
      }
      if (!this.new_mobile) {
        this.$toast({
          title: '请输入新的手机号码'
        })
        return
      }

      changeUserMobile({
        mobile: this.userInfo.mobile,
        new_mobile: this.new_mobile,
        code: this.mobileCode,
        action: this.userInfo.mobile ? 'change' : 'binding'
      }).then((res) => {
        if (res.code == 1) {
          this.showMobile = false
          this.$toast({
            title: res.msg
          })
          this.getUserInfoFun()
        }
      })
    },
    // 修改用户信息
    async setUserInfoFun(value) {
      const res = await setUserInfo({
        field: this.fieldType,
        value: value
      })
      if (res.code == 1) {
        this.$toast({
          title: res.msg
        })
        this.getUserInfoFun()
      }
    },
    onConfirm(value) {
      this.setUserInfoFun(value[0] + 1)
      this.showPicker = false
    },
    changeSex(e) {
      this.showPicker = true
      this.fieldType = FieldType.SEX
    },

    // 修改密码
    showPwdPop() {
      if (!this.userInfo.mobile) {
        this.$toast({
          title: '请绑定手机后再设置密码'
        })
        return
      }
      this.smsType = SMSType.FINDPWD
      this.showPwd = true
    },
    // 修改昵称
    changeName() {
      this.fieldType = FieldType.NICKNAME
      this.newNickname = ''
      this.showNickName = true
    },
    // 微信获取手机号
    // #ifdef MP-WEIXIN
    async getPhoneNumber(e) {
      console.log(e, this.code)
      const { encryptedData, iv } = e.detail
      const params = {
        code: this.code,
        encrypted_data: encryptedData,
        iv
      }
      this.fieldType = FieldType.MOBILE
      if (encryptedData) {
        const { data, code, msg } = await getWxMnpMobile(params)
        if (code == 1) {
          this.$toast({
            title: msg
          })
          // #ifdef MP-WEIXIN
          getWxCode().then((res) => {
            this.code = res
          })
          // #endif
          this.getUserInfoFun()
        }
      }
    },
    // #endif
    forgetPwdFun() {
      let { pwdCode, pwd, comfirmPwd } = this
      if (!pwdCode) {
        this.$toast({
          title: '请输入短信验证码'
        })
        return
      }
      if (!pwd) {
        this.$toast({
          title: '请输入新密码'
        })
        return
      }
      if (!comfirmPwd) {
        this.$toast({
          title: '再次输入新密码确认'
        })
        return
      }
      if (pwd != comfirmPwd) {
        this.$toast({
          title: '两次密码输入不一致'
        })
        return
      }
      let data = {
        mobile: this.userInfo.mobile,
        code: pwdCode,
        password: pwd,
        repassword: comfirmPwd
      }
      forgetPwd(data).then((res) => {
        if (res.code == 1) {
          this.showPwd = false
          this.$toast({
            title: '设置密码成功'
          })
          this.getUserInfoFun()
        }
      })
    },
    forgetPwdFun2() {
      let { pwdCode2, pwd2, comfirmPwd2 } = this
      if (!pwdCode2 && this.radioValue == 0) {
        this.$toast({
          title: '请输入短信验证码'
        })
        return
      }

      if (!pwd2  && this.radioValue == 0) {
        this.$toast({
          title: '请输入新密码'
        })
        return
      }
      if (!comfirmPwd2  && this.radioValue == 0) {
        this.$toast({
          title: '再次输入新密码确认'
        })
        return
      }
      if ((pwd2 != comfirmPwd2) && this.radioValue == 0) {
        this.$toast({
          title: '两次密码输入不一致'
        })
        return
      }
      if(this.radioValue == 1) {
        pwdCode2 = '';
        pwd2 = '';
        comfirmPwd2 = '';
      }
      let data = {
        mobile: this.userInfo.mobile,
        code: pwdCode2,
        password: pwd2,
        password_confirm: comfirmPwd2,
        use_password: this.radioValue,
      }
      setPaypasswd(data).then((res) => {
        if (res.code == 1) {
          this.showPwd2 = false
          this.$toast({
            title: '设置密码成功'
          })
          this.getUserInfoFun();
          this.getUserFunc();
        }
      })
    },
    sendSmsFun2() {
      if (!this.$refs.uCode2.canGetCode) return
      getSendCode({
        mobile: this.userInfo.mobile || this.new_mobile,
        key: 'ZHZFMM'
      }).then((res) => {
        if (res.code == 1) {
          this.$toast({
            title: res.msg
          })
          this.$refs.uCode2.start()
        }
      })
    },
    codeChange2(text) {
      this.codeTips2 = text
    },
    showPwdPop2() {
      this.showPwd2 = true;
    },
  },

  async onLoad() {
    this.getUserFunc();
    this.getUserInfoFun()
    this.getCacheSize()
    // #ifdef MP-WEIXIN
    getWxCode().then((res) => {
      this.code = res
    })
    // #endif
    // #ifdef H5
    let { code, form } = this.$Route.query
    if (code) {
      if (Array.isArray(code)) code = code.pop()

      await apibindOa({
        code
      })
    }
    // #endif
    uni.$on('uAvatarCropper', (path) => {
      console.log(path)
      this.uploadImage(path)
    })
    this.getUserProfileFun = trottle(this.getUserProfileFun, 500, this)
  },
  onUnload() {
    uni.$off('uAvatarCropper')
  },
  computed: {
    ...mapGetters(['token', 'appConfig'])
  }
}
</script>

<style lang="scss">
.user-profile {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  overflow: hidden;

  /* 确保导航栏在其他内容之上 */
  /deep/ .u-navbar {
    z-index: 999 !important;
  }

  /deep/ .u-navbar__content__title {
    color: #FFFFFF !important;
    font-weight: bold;
  }

  /deep/ .u-icon {
    color: #FFFFFF !important;
  }

  /* 背景装饰 */
  .profile-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300rpx;
    overflow: hidden;
    z-index: 0;

    .bg-gradient {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 300rpx;
      background: linear-gradient(135deg, #2672fc, #2672fc);
    }

    .bg-shape {
      position: absolute;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
    }

    .shape1 {
      width: 300rpx;
      height: 300rpx;
      top: -150rpx;
      right: -80rpx;
    }

    .shape2 {
      width: 200rpx;
      height: 200rpx;
      bottom: -50rpx;
      left: -50rpx;
    }

    .shape3 {
      width: 120rpx;
      height: 120rpx;
      top: 40rpx;
      left: 180rpx;
    }
  }

  /* 内容区 */
  .content {
    position: relative;
    z-index: 1;
    padding: 30rpx;
    // padding-top: calc(var(--status-bar-height, 44px) + 94rpx); /* 状态栏 + 导航栏高度 + 额外间距 */
  }

  /* 用户卡片 */
  .user-card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
  }

  .avatar-container {
    position: relative;
    margin-right: 30rpx;

    .user-avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      border: 4rpx solid #FFFFFF;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    }

    .edit-badge {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 40rpx;
      height: 40rpx;
      background: #FF4B4B;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    }
  }

  .user-info {
    flex: 1;

    .nickname {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 10rpx;
    }

    .user-id {
      font-size: 24rpx;
      color: #999;
    }
  }

  /* 菜单部分 */
  .menu-section {
    padding: 0 0 20rpx;
  }

  .menu-card {
    background: #FFFFFF;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
    overflow: hidden;
  }

  .menu-item {
    display: flex;
    align-items: center;
    padding: 30rpx 20rpx;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      left: 80rpx;
      right: 24rpx;
      bottom: 0;
      height: 1px;
      background: #f5f5f5;
    }

    &:last-child:after {
      display: none;
    }
  }

  .menu-icon {
    width: 60rpx;
    height: 60rpx;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
  }

  .lock-icon {
    background: #FFEFEF;
  }

  .lock-icon2 {
    background: #486eeb;
  }

  .wx-icon {
    background: #E7F8EF;
  }

  .cert-icon {
    background: #FFEFEF;
  }

  .cache-icon,
  .cancel-icon,
  .privacy-icon,
  .agreement-icon,
  .about-icon {
    background: #FFEFEF;
  }

  .menu-label {
    flex: 1;
    font-size: 28rpx;
    color: #333;
  }

  .menu-value {
    display: flex;
    align-items: center;

    .status-text {
      font-size: 24rpx;
      color: #999;
      margin-right: 10rpx;
    }

    .version-text {
      font-size: 24rpx;
      color: #999;
    }
  }

  /* 退出登录按钮 */
  .logout-btn-container {
    margin: 60rpx 0 30rpx;
    padding: 0 40rpx;
  }

  .logout-btn {
    height: 90rpx;
    background: linear-gradient(135deg, #2672fc, #2672fc);
    border-radius: 45rpx;
    color: white;
    font-size: 32rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 16rpx rgba(69, 144, 243, 0.2);
    transition: transform 0.2s;

    &:active {
      transform: scale(0.98);
    }
  }

  /* 版权信息 */
  .license {
    text-align: center;
    font-size: 24rpx;
    color: #a7a7a7;
    margin-top: 40rpx;
    line-height: 1.6;
  }

  /* 弹窗样式 */
  .modify-container {
    padding: 40rpx;
    width: 620rpx;
    border-radius: 20rpx;

    .title {
      padding: 20rpx 0;
      font-weight: 600;
      color: #333;
    }

    .code-btn {
      height: 60rpx;
      padding: 0 20rpx;
      background: #FF4B4B;
      color: white;
      border-radius: 30rpx;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pwd-btn {
      height: 80rpx;
      border-radius: 40rpx;
      margin: 60rpx 50rpx 20rpx;
      background: #FF4B4B;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
    }

    .btn {
      height: 80rpx;
      border-radius: 40rpx;
      margin: 60rpx 50rpx 20rpx;
      background: #FF4B4B !important;
    }

    .btn2 {
      height: 80rpx;
      border-radius: 40rpx;
      margin: 60rpx 50rpx 20rpx;
      background: #486eeb !important;
    }
  }

  .send-code-btn {
    background: #FF4B4B !important;
    color: white;
    padding: 6rpx 20rpx;
    border-radius: 30rpx;
  }

  .send-code-btn2 {
    background: #486eeb !important;
    color: white;
    padding: 6rpx 20rpx;
    border-radius: 30rpx;
  }
}

::v-deep .u-radio__label {
  font-size: 28rpx;
}
</style>